<template>
	<view class="search-collapse">
		<view class="container">
			<view class="collapse-head">
				<view v-for="(item,key,index) in formNames" :key="key" @click="handleCollapse(key)">
					<view class="item" :class="{'active':key == currentKey}">
						<text>{{item}}</text>
						<u-icon class="icon" name="arrow-down-fill"></u-icon>
					</view>
				</view>
			</view>
			<view class="collapse-body" v-if="collapseBodyShow">
				<view class="content">
					<scroll-view style="height: 100%;" scroll-y="true">
						<slot name="content" :currentKey="currentKey"></slot>
					</scroll-view>
				</view>
				<view class="footer">
					<button class="reset-btn" plain @click="reset">重置</button>
					<button type="primary" @click="submit">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			formNames: {
				type: Object,
				default: () => {}
			},
			form: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				collapseBodyShow: false,
				currentKey: null,
				formData: {}
			}
		},
		watch: {
			form: {
				handler(val) {
					console.log(val);
					this.formData = val
				},
				deep: true
			}
		},
		methods: {
			handleCollapse(e) {
				if (!this.collapseBodyShow) this.collapseBodyShow = true
				if (this.collapseBodyShow && this.currentKey == e) {
					this.collapseBodyShow = false
					this.currentKey = null
					this.$emit('key-change', {
						key: null
					})
					return
				}
				this.currentKey = e

				this.$emit('key-change', {
					key: e
				})
			},
			submit() {
				console.log(this.formData);
				this.collapseBodyShow = false
				this.currentKey = null
				this.$emit('submit', this.formData)
				this.formData[this.currentKey] = null
			},
			reset() {
				this.formData[this.currentKey] = null
				this.$emit('reset', this.formData)
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-collapse {
		background-color: #fff;
		position: relative;
		z-index: 10;

		.collapse-head {
			padding: 40rpx 60rpx;
			display: flex;
			justify-content: space-between;

			.item {
				font-size: 26rpx;

				.icon {
					margin-left: 12rpx;
					font-size: 20rpx;
					transform: scale(0.7);
				}
			}

			.active {
				color: $main-color;
			}
		}

		.collapse-body {
			width: 100%;
			position: absolute;
			bottom: -356rpx;
			padding: 26rpx 30rpx;
			height: 356rpx;
			background-color: #F2F3F5;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;


			.content {
				flex: 1;
				height: 100%;
				overflow: hidden;
			}


			.footer {
				display: flex;

				.reset-btn {
					background-color: #FFFFFF;

					border: 1px solid $main-color;
					color: $main-color;
				}

				button {
					flex: 1;
					border-radius: 16rpx;

					&:first-child {
						margin-right: 56rpx;
					}
				}
			}
		}
	}
</style>